<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
    <title>TicTacToe</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <p>Добро пожаловать в игру "Крестики-нолики"!</p>
</head>
<body>
<p id="Nickname">Logged as: </p>
<form id="Login form">
    <p>Введите имя</p>
    <input type="text" name="LoginTextBox"/>
    <input type="button" value="Login" onclick="Login()"/>
</form>

<form id="Lobby form">
    <p>List of online players:</p>
    <select name="List" size="10">
    </select>
    <p>Введите имя игрока которого хотели бы пригласить</p>
    <input type="text" id="InviteTextBox"/>
    <input type="button" value="Invite" onclick="Invite()"/>
</form>

<form id="Game form">
    <p id="OpponentNickname">Opponent's name: </p>
    <p id="MovingPlayer"></p>
    <p><input type="button" id="Btn1" value=" " onclick="Move(0)"/><input type="button" id="Btn2" value=" " onclick="Move(1)"/><input type="button" id="Btn3" value=" " onclick="Move(2)"/></p>
    <p><input type="button" id="Btn4" value=" " onclick="Move(3)"/><input type="button" id="Btn5" value=" " onclick="Move(4)"/><input type="button" id="Btn6" value=" " onclick="Move(5)"/></p>
    <p><input type="button" id="Btn7" value=" " onclick="Move(6)"/><input type="button" id="Btn8" value=" " onclick="Move(7)"/><input type="button" id="Btn9" value=" " onclick="Move(8)"/></p>
</form>

<form id="Invited form">
    <p id="Invited"></p>
    <p>Accept?</p>
    <p><input type="button" id="Btn1" value=" " onclick="Move(0)"/><input type="button" id="Btn2" value=" " onclick="Move(1)"/><input type="button" id="Btn3" value=" " onclick="Move(2)"/></p>
    <p><input type="button" id="Btn4" value=" " onclick="Move(3)"/><input type="button" id="Btn5" value=" " onclick="Move(4)"/><input type="button" id="Btn6" value=" " onclick="Move(5)"/></p>
    <p><input type="button" id="Btn7" value=" " onclick="Move(6)"/><input type="button" id="Btn8" value=" " onclick="Move(7)"/><input type="button" id="Btn9" value=" " onclick="Move(8)"/></p>
</form>

</body>
</html>

 <script type="text/javascript">
     var Btn1 = document.getElementById("Btn1");
     var Btn2 = document.getElementById("Btn2");
     var Btn3 = document.getElementById("Btn3");
     var Btn4 = document.getElementById("Btn4");
     var Btn5 = document.getElementById("Btn5");
     var Btn6 = document.getElementById("Btn6");
     var Btn7 = document.getElementById("Btn7");
     var Btn8 = document.getElementById("Btn8");
     var Btn9 = document.getElementById("Btn9");
     var MovingPlayer = document.getElementById("MovingPlayer");
     var OpponentNickname = document.getElementById("OpponentNickname");
     var Invited = document.getElementById("Invited");


toggle("Game form");
toggle("Lobby form");
toggle("Nickname");
toggle("Invited form");
var Nickname = null;
var flag = true;
var ListBox = document.getElementsByName("List")[0];
var timer = null;
     //Логин на сервер
     function Login()
     {
         var TextBox = document.getElementsByName("LoginTextBox")[0];
         var answer = httpGet("Login^"+TextBox.value);
         Nickname = TextBox.value;
         var players = answer.split('^');

         for (var i = 0; i < players.length; i++)
         {
             var opt = document.createElement("OPTION");
             opt.value = 0;
             opt.text = players[i];
             ListBox.add(opt);
         }
         document.getElementById("Nickname").innerHTML += Nickname;
         toggle("Nickname");
         toggle("Lobby form");
         toggle("Login form");
         timer = setInterval(Checkstate, 2000);
     }

    function Invite()
    {
        var ListBox = document.getElementsByName("List")[0];
        var opt = ListBox.selected;
        var answer = httpGet("Invite^"+Nickname+"^target^"+document.getElementById("InviteTextBox").value^"Tictactoe");

        switch (answer)
        {
            case "Declined" : alert("Invite Declined");
                break;
            case "Accepted" : Startgame();
                OpponentNickname.innerHTML = "Your opponent is: " +document.getElementById("InviteTextBox").value;
                break;
            default : break;
        }
    }

    function Startgame()
    {
        toggle("Lobby form");
        flag = false;
        toggle("Game form");
    }

    function Checkstate()
    {
        if(flag)
        {
            if (Nickname)
            {
                var answer = httpGet("Check^"+Nickname);
                var args = answer.split('^');
                if(args[0] == "Invited")
                {
                    var x=window.confirm(args[1]+" invites you to play! Accept?");
                    if (x)
                    {
                        OpponentNickname.innerHTML = "Opponent is: "+ args[1];
                        httpGet("Answer^"+Nickname+"^Accept");
                        Startgame();
                    }
                    else
                    {
                        httpGet("Decline");
                    }
                }
                else
                {
                    while (ListBox.item(0))
                    {
                        ListBox.remove(0);
                    }

                    var players = answer.split('^');
                    for (var i = 0; i < players.length; i++)
                    {
                        var opt = document.createElement("OPTION");
                        opt.value = 0;
                        opt.text = players[i];
                        ListBox.add(opt);
                    }
                }
            }
        }
        else
        {
            var answer = httpGet("Check^"+Nickname);
            var arguments = answer.split('^');

            if (arguments.length == 3)
            {
                var gamefield = arguments[1].split(',');
                MovingPlayer.innerHTML = arguments[2]+"`s move";

                for(var i = 0; i < gamefield.length; i++)
                {
                    if (gamefield[i] == 1)
                    {
                        gamefield[i] = "X";
                    }
                    else if (gamefield[i] == 2)
                    {
                        gamefield[i] = "O";
                    }
                    else
                    {
                        gamefield[i] = " ";
                    }
                }


                Btn1.value = gamefield[0];
                Btn2.value = gamefield[1];
                Btn3.value = gamefield[2];
                Btn4.value = gamefield[3];
                Btn5.value = gamefield[4];
                Btn6.value = gamefield[5];
                Btn7.value = gamefield[6];
                Btn8.value = gamefield[7];
                Btn9.value = gamefield[8];
            }
            else
            {
                alert(arguments[1]);
                toggle("Lobby form");
                flag = true;
                toggle("Game form");
            }
        }
    }

     function Move(value)
     {
         var Moving = MovingPlayer.innerHTML.split('`');
         if (Moving[0]==Nickname)
         {
             var answer = httpGet("Move^"+Nickname+"^"+value);

             if (answer.split('^').length == 2)
             {
                 alert(answer.split('^')[1]);
                 toggle("Lobby form");
                 flag = true;
                 toggle("Game form");
             }
         }
     }

     //Показывает/скрывает форму
     function toggle(x) {
         if (document.getElementById(x).style.display == 'none') {
             document.getElementById(x).style.display = '';
         } else {
             document.getElementById(x).style.display = 'none';
         }
     }

     //Функция отправки запроса, возвращает ответ от сервера
     function httpGet(theUrl) {
         var xmlHttp = null;

         xmlHttp = new XMLHttpRequest();

         xmlHttp.open("POST", theUrl, false);
         //xmlHttp.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
         xmlHttp.send(null);
         return xmlHttp.responseText;
     }

</script>